<template>
	<view>
		<!-- TODO 群详情 -->
		<view class="member_list">
			<view class="u-flex u-row-between">
				<view class="l-font">群详情</view>
				<view class="u-flex r-font">
					<text>查看更多成员</text>
					<u-image class="u-m-l-15 u-m-b-8" src="/static/images/right.png" width="13" height="23" :fade="false"></u-image>
				</view>
			</view>
			<view class="avatar_list u-m-t-22 u-flex">
				<view class="avatar u-m-r-40">
					<u-image src="/static/extra/avatar.png" width="98" height="98" :fade="false"></u-image>
					<view class="nickname u-line-1">简单</view>
				</view>
			</view>
		</view>
		<u-cell-group class="u-m-t-20">
			<u-cell-item title="群名称" value="简单的群"></u-cell-item>
			<u-cell-item title="群二维码" @click="qrShow = !qrShow">
				<u-image slot="right-icon" src="/static/images/qr_code.png" width="48" height="48" :fade="false"></u-image>
			</u-cell-item>
			<u-cell-item title="消息置顶" :arrow="false" hover-class="none">
				<u-switch slot="right-icon" size="36" active-color="#2FD6AC"></u-switch>
			</u-cell-item>
			<u-cell-item title="消息免打扰" :arrow="false" hover-class="none">
				<u-switch slot="right-icon" size="36" active-color="#2FD6AC"></u-switch>
			</u-cell-item>
			<u-cell-item title="查看聊天记录"></u-cell-item>
		</u-cell-group>
		
		<u-cell-group class="u-m-t-26">
			<u-cell-item title="清空聊天记录"></u-cell-item>
			<u-cell-item title="禁言"></u-cell-item>
			<u-cell-item title="全体禁言" :arrow="false" hover-class="none">
				<u-switch slot="right-icon" size="36" active-color="#2FD6AC"></u-switch>
			</u-cell-item>
			<u-cell-item title="群管理"></u-cell-item>
			<u-cell-item title="举报"></u-cell-item>
		</u-cell-group>
		
		<u-button :custom-style="{borderRadius: 0, border: 0, marginTop: '100rpx'}" :hair-line="false">退出群聊</u-button>
		
		<qr-code v-show="qrShow" :show.sync="qrShow"></qr-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qrShow: false,
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $bg-color;
	}
	.member_list {
		width: 750rpx;
		height: 226rpx;
		background-color: #FFFFFF;
		padding: 22rpx 42rpx;
	}
	.l-font {
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
	}
	.r-font {
		font-size: 22rpx;
		color: #999999;
	}
	.avatar {
		display: flex;
		flex-direction: column;
		width: 98rpx;
	}
	.nickname {
		margin: 0 auto;
		color: #787878;
		max-width: 98rpx;
	}
</style>
